<template>
  <div>
    <img
      v-if="image"
      class="qrcode no-select"
      :src="qrcode"
      :style="imageStyle"
      @touchstart="touchstartQrcode"
      v-long-touch="longTouchQrcode"
    />
    <div
      v-else
      class="wxno no-select"
	  :style="{ margin: margin }"
      @touchstart.stop.prevent
      @copy.stop.prevent
      v-long-touch="longTouchWx"
      v-click-outside="clickOutside"
    >
      <van-popover
        v-model="showCopy"
        trigger="click"
        :close-on-click-outside="false"
        placement="top"
        theme="dark"
      >
        <div class="copy-tip" @click="onCopy">复制</div>
        <template #reference>
          <span :class="{ 'select-range': showCopy }">{{ qrcode }}</span>
        </template>
      </van-popover>
    </div>
    <template v-if="desc">
      <div class="wx-desc" v-html="desc"></div>
    </template>
  </div>
</template>
<script>
import { openWxApp } from "@/utils";
import { isWechat } from "@/utils/validate";
import longTouch from "@/directives/long-touch";
import clickOutside from "@/directives/click-outside";
import { copy } from "@/directives/clipboard";
export default {
  directives: {
    longTouch,
    clickOutside,
  },
  props: {
    image: {
      type: Boolean,
      default: false,
    },
    imageAutosize: {
      type: Boolean,
      default: false,
    },
    qrcode: String,
    skipWx: {
      type: Boolean,
      default: true,
    },
    desc: String,
	margin: {
		type: String,
		default: '0.2222rem 0'
	}
  },
  data() {
    return {
      showCopy: false,
    };
  },
  computed: {
    imageStyle() {
      if (!this.imageAutosize) return;
      return {
        width: "100%",
        height: "auto",
		margin: this.margin
      };
    },
  },
  methods: {
    touchstartQrcode() {
      if (isWechat || !this.qrcode) return;
      // this.$toast({
      //   message: "请在微信打开此链接",
      //   position: "top",
      // });
    },
    longTouchQrcode() {
      // if (!isWechat) return;
      this.$emit("callback");
    },
    clickOutside() {
      this.showCopy = false;
    },
    longTouchWx() {
      console.log("longTouchWx");
      this.showCopy = true;
    },
    onCopy(ev) {
      copy(this.qrcode, ev, (v) => {
        if (!v) return;
        this.showCopy = false;
        this.$emit("callback");
        if (this.skipWx) {
          openWxApp();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.qrcode,
.wxno {
  margin: 0.2222rem 0;
}
.qrcode {
  width: 3.3333rem;
  height: 3.3333rem;
}
.wxno {
  padding: 0.4222rem 0.2222rem;
  font-size: 0.45rem;
  font-weight: 600;
  color: #f7763f;
  background: #faf6f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  user-select: all;
  white-space: pre-wrap;
  word-break: break-all;
  .select-range {
    background: #f1c0ac;
  }
}
.copy-tip {
  font-size: 0.3733rem;
  text-align: center;
  width: 1.8667rem;
  height: 0.96rem;
  line-height: 0.96rem;
}
.wx-desc {
  margin-top: 0.5333rem;
  img {
    width: 100%;
    vertical-align: middle;
  }
}
</style>
